﻿

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>6</title>

		<script src="vue.js">
<script type="text/javascript">
<!--


//-->
</script>

    </head>
    <body class="docs">

<div id="app">
  <p>{{ message }}</p>
  <p>{{ b }}</p>
  <anchored-heading :level="1">H1</anchored-heading>
  <anchored-heading :level="2">H2</anchored-heading>
  <my-component :level="3">my-component</my-component>
</div>

    </body>

<script type="text/javascript">
<!--


Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // tag name 标签名称
      this.$slots.default // 子组件中的阵列
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

Vue.component('my-component', {
  functional: true,
  // 为了弥补缺少的实例
  // 提供第二个参数作为上下文
  render: function (createElement, context) {
    return createElement(
      'h' + context.props.level ,
      context.children
    )
  },
  // Props 可选
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
	b : ''
  }
})


</script>

</html>
